<template>
  <div style="display: flex; flex-direction: column;">
    <!-- 第一个Flex容器，包含上面两个图表 -->
    <div style="display: flex; ">
      <div id="myChart1" style="width: 700px; height: 400px; "></div>
      <div id="myChart2" style="width: 700px; height: 400px; "></div>
      <!-- 注意：这里使用了margin来在图表之间添加间距，并且使用了auto来水平居中图表 -->
    </div>
    <div style="display: flex; flex-direction: column; width: 100%;">
      <div id="myChart3" style="width: 700px; height: 400px; margin: 20px auto 0;"></div>

    </div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";
import item from "@/layout/components/Sidebar/Item";
export default {
  data(){
    return {
    }
  },
  mounted(){
    this.initChart1();
    this.initChart2();
    this.initChart3();
  },
  methods: {
    initChart1() {
      var names = [];
      var counts = [];
      var mychart = echarts.init(document.getElementById('myChart1'));
      var data = [];
      axios.get("http://62.234.193.187:8081/echarts/echarts/echart3").then(function (res) {
        data = res.data.sum;
        for (var i = 0; i < data.length; i++) {
          names.push(data[i].job_title);
          counts.push(data[i].sum);
        }
        mychart.setOption({
          title: {
            text: '各岗位投递简历份数',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: names,
            axisLabel: {
              interval: 0,
              rotate: 45
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: counts,
              type: 'bar'
            }]
        });

      })

    },
    initChart2() {
      var mychart = echarts.init(document.getElementById('myChart2'));
      var data = [];
      return axios.get("http://62.234.193.187:8081/echarts/echarts/echarts4")
        .then(function (res) {
          var response = res.data.aaa;
          var jobName = response.map(item => item.job_title);
          for (var i = 0; i < response.length; i++) {
            var d = { name: '', value: 0 };
            d.name = response[i].job_title;
            d.value = response[i].avg;
            data.push(d);
          }
          data.sort((a, b) => (a.value - b.value));

          mychart.setOption({
            title: { text: '各岗位占比', left: 'center' },
            tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' },
            legend: { left: 'center', top: 'bottom', data: jobName },
            series: [{
              name: 'Radius Mode',
              type: 'pie',
              radius: ['30%', '70%'], // 环形图设置
              label: { show: true, position: 'outside' },
              labelLine: { show: true },
              data: data
            }]
          });
        })
        .catch(function (error) {
          console.error('请求失败:', error);
          alert('获取“各岗位薪资分布”数据失败，请稍后重试。');
        });
    },
    initChart3() {
      var mychart = echarts.init(document.getElementById('myChart3'));
      var companyNames = [];
      var jobCounts = [];

      return axios.get("http://62.234.193.187:8081/echarts/echarts/companyJobStats")
        .then(function (res) {
          var response = res.data.companyJobStats;
          for (var i = 0; i < response.length; i++) {
            companyNames.push(response[i].company_Name);
            jobCounts.push(response[i].jobCount);
          }

          mychart.setOption({
            title: {
              text: '公司招聘岗位统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{b}: {c} 岗位'
            },
            xAxis: {
              type: 'category',
              data: companyNames,
              axisLabel: {
                rotate: 45,
              }
            },
            yAxis: {
              type: 'value',
              axisLabel: {
                formatter: '{value} 岗位'
              }
            },
            series: [{
              name: '招聘岗位数',
              type: 'scatter',
              data: companyNames.map((name, index) => ({
                name: name,
                value: [companyNames[index], jobCounts[index]]
              })),
              symbolSize: 10,
              itemStyle: {
                color: '#4E9E99'
              }
            }]
          });
        })
        .catch(function (error) {
          console.error('请求失败:', error);
          alert('获取“公司招聘岗位统计”数据失败，请稍后重试。');
        });
    },

  }
}
</script>
